<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>带缩略图的图片切换</title>
    <style>
        /* reset */
        body,ul,h3 { margin:0; padding:0; }
        li { list-style:none; }
        img { border:none; vertical-align:top; }
        body { font-size:12px; font-family:"微软雅黑"; }
        a{
            text-decoration: none;
        }
        /*----public----*/
        /*---浮动----*/
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .clear { zoom:1; }
        .clear:after { content:''; display:block; clear:both; }
        .box{
            width: 400px;
            margin: 40px auto;
        }
        h3{
            font-size: 15px;
            color: #66FFFF;
        }
        .imgWarp{
            width: 400px;
            height: 500px;
            position: relative;
        }
        #img{
            width: 400px;
            height: 500px;

        }
        .warp{
            position: relative;
            width: 400px;
            height: 30px;

        }
        #list{
            text-align: center;
            position: absolute;
            left: 140px;
            top: 10px;

        }
        #list li{
            float: left;
            margin-right: 10px;
        }
        #list li div{
            width: 10px;
            height: 10px;
            border: 1px solid #333;
            border-radius: 50%;
            cursor: pointer;
        }
        .aWarp1, .aWarp2{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: gold;
            position: absolute;
            text-align: center;
            line-height: 50px;
            top: 225px;
        }
        .imgWarp div a{
            color: #fff;
            font-size: 24px;
        }
        .aWarp1{
            left: 0px;
        }
        .aWarp2{
            right: 0px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var srcArr=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg'];
            var oImg=document.getElementById("img");
            var oWarp1=document.getElementById("aWarp1");
            var oWarp2=document.getElementById("aWarp2");
            var oUl=document.getElementById("list");
            var oDiv=oUl.getElementsByTagName("div");
            var num=0;
            oImg.src="img/mv/"+srcArr[num];
            oDiv[num].style.background='#FF99CC';
            oWarp2.onclick=function(){
                if(num==srcArr.length-1){
                    num=0;
                }else{
                    num++;
                }
                sz();
            }
            oWarp1.onclick=function(){
                if(num==0){
                    num=srcArr.length-1;
                }else{
                    num--;
                }
                sz();
            }

            for(var i=0;i<oDiv.length;i++){
                oDiv[i].index=i;
                oDiv[i].onclick=function(){
                    num=this.index;
                    sz();

                }
            }
            function sz(){
                for(var i=0;i<oDiv.length;i++){
                    oDiv[i].style.background='none';
                }
                oImg.src="img/mv/"+srcArr[num];
                oDiv[num].style.background='#FF99CC';
            }
        }


    </script>
</head>
<body>
<div class="box">
    <h3>带缩略图的图片轮换</h3>
    <div class="imgWarp">
        <img id="img" />
        <div class="aWarp1" id="aWarp1"><a href="javascript:;"> < </a> </div>
        <div class="aWarp2" id="aWarp2"><a href="javascript:;"> > </a> </div>
    </div>

    <div class="clear warp">
        <ul id="list">
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
    </div>
</div>

</body>
</html>